<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆瓣案例</title>
    <link rel="stylesheet" href="/CSS/豆瓣.CSS">
</head>


<body>
    <header>
        <div class="nav_container">
            <ul class="nav_left">
                <li><a href="">豆瓣</a></li>
                <li><a href="">读书</a></li>
                <li><a href="">电影</a></li>
                <li><a href="">音乐</a></li>
                <li><a href="">同城</a></li>
                <li><a href="">小组</a></li>
                <li><a href="">阅读</a></li>
                <li><a href="">FM</a></li>
                <li><a href="">时间</a></li>
            </ul>
            <ul class="nav_right">
                <li><a href="">下载豆瓣客户端</a></li>
                <li><a href="">豆邮</a></li>
                <li><a href="">提醒</a></li>
            </ul>
        </div>
    </header>

    <!-- 页面主内容 -->
    <div class="main_container">
        <main>
            <h3>豆瓣读书</h3>
            <input type="text" placeholder="书名、作者、ISBN">
            <button type="submit">搜索</button>
            <div class="main_nav">
                <ul>
                    <li><a href="">我读</a></li>
                    <li><a href="">动态</a></li>
                    <li><a href="">豆瓣猜</a></li>
                    <li><a href="">分类浏览</a></li>
                    <li><a href="">购书单</a></li>
                    <li><a href="">电子图书</a></li>
                    <li><a href="">2024年度报告</a></li>
                </ul>
            </div>
            
            <div class="main_img">
                <img src="./img/导航下.png">
            </div>
        </main>

        <div class="insert_content">
            <h3>新书速递</h3>
            <ul>
                <li><a href="">全部</a></li>
                <li><a href="">文学</a></li>
                <li><a href="">小说</a></li>
                <li><a href="">历史文化</a></li>
                <li><a href="">社会纪实</a></li>
                <li><a href="">科学新知</a></li>
                <li><a href="">绘本漫画</a></li>
            </ul>
        </div>


        <div class="content_container">
            <div class="main_content">
                <div class="content_section">
                    <img src="./img/与哀伤共处.png">
                    <div class="section_down">
                        <p>与哀伤共处</p>
                    </div>
                </div>

                <div class="content_section">
                    <img src="./img/如何阅读一颗树.png">
                    <div class="section_down">
                        <p>如何阅读一棵树</p>
                    </div>
                </div>


                <div class="content_section">
                    <img src="./img/人生拒绝清单.png">
                    <div class="section_down">
                        <p>人生拒绝清单</p>
                    </div>
                </div>



                <div class="content_section">
                    <img src="./img/他的生活.png">
                    <div class="section_down">
                        <p>她的生活</p>
                    </div>
                </div>



                <div class="content_section">
                    <img src="./img/中国绘画.png">
                    <div class="section_down">
                        <p>中国绘画</p>
                    </div>
                </div>



                <div class="content_section">
                    <img src="./img/血孩子.png">
                    <div class="section_down">
                        <p>血孩子</p>
                    </div>
                </div>



                <div class="content_section">
                    <img src="./img/笔的力量.png">
                    <div class="section_down">
                        <p>笔的重量</p>
                    </div>
                </div>



                <div class="content_section">
                    <img src="./img/在工作中迷失.png">
                    <div class="section_down">
                        <p>在工作中迷失</p>
                    </div>
                </div>


                <div class="content_section">
                    <img src="./img/不再踏入流量的河.png">
                    <div class="section_down">
                        <p>不再踏入流量的河</p>
                    </div>
                </div>
            </div>


            <div class="aside_content">
                <h4>热门标签</h4>
                <hr>
                <div class="aside_label">
                    <h5>文学</h5>
                    <div class="aside_links">
                        <ul>
                            <li><a href="">小说</a></li>
                            <li><a href="">随笔</a></li>
                            <li><a href="">名著</a></li>
                            <li><a href="">散文</a></li>
                            <li><a href="">诗歌</a></li>
                            <li><a href="">童话</a></li>
                            <li><a href="">更多</a></li>
                        </ul>
                    </div>
                </div>

                <div class="aside_label">
                    <h5>流行</h5>
                    <div class="aside_links">
                        <ul>
                            <li><a href="">漫画</a></li>
                            <li><a href="">推理</a></li>
                            <li><a href="">绘本</a></li>
                            <li><a href="">科幻</a></li>
                            <li><a href="">青春</a></li>
                            <li><a href="">言情</a></li>
                            <li><a href="">奇幻</a></li>
                            <li><a href="">武侠</a></li>
                            <li><a href="">更多</a></li>
                        </ul>
                    </div>
                </div>

                <div class="aside_label">
                    <h5>文化</h5>
                    <div class="aside_links">
                        <ul>
                            <li><a href="">历史</a></li>
                            <li><a href="">哲学</a></li>
                            <li><a href="">传记</a></li>
                            <li><a href="">设计</a></li>
                            <li><a href="">电影</a></li>
                            <li><a href="">建筑</a></li>
                            <li><a href="">回忆录</a></li>
                            <li><a href="">音乐</a></li>
                            <li><a href="">更多</a></li>

                        </ul>
                    </div>
                </div>


                <div class="aside_label">
                    <h5>生活</h5>
                    <div class="aside_links">
                        <ul>
                            <li><a href="">旅游</a></li>
                            <li><a href="">励志</a></li>
                            <li><a href="">教育</a></li>
                            <li><a href="">职场</a></li>
                            <li><a href="">美食</a></li>
                            <li><a href="">健康</a></li>
                            <li><a href="">灵修</a></li>
                        </ul>
                    </div>
                </div>


                <div class="aside_label">
                    <h5>经营</h5>
                    <div class="aside_links">
                        <ul>
                            <li><a href="">管理</a></li>
                            <li><a href="">商业</a></li>
                            <li><a href="">金融</a></li>
                            <li><a href="">营销</a></li>
                            <li><a href="">理财</a></li>
                            <li><a href="">股票</a></li>
                            <li><a href="">更多</a></li>
                        </ul>
                    </div>
                </div>


                <div class="aside_label">
                    <h5>科技</h5>
                    <div class="aside_links">
                        <ul>
                            <li><a href="">科普</a></li>
                            <li><a href="">编程</a></li>
                            <li><a href="">算法</a></li>
                            <li><a href="">通信</a></li>
                            <li><a href="">更多</a></li>
                        </ul>
                    </div>
                </div>


                <div class="aside_label">
                    <h5>科技</h5>
                    <div class="aside_links">
                        <ul>
                            <li><a href="">科普</a></li>
                            <li><a href="">编程</a></li>
                            <li><a href="">算法</a></li>
                            <li><a href="">通信</a></li>
                            <li><a href="">更多</a></li>
                        </ul>
                    </div>
                </div>


                <div class="aside_label">
                    <h5>科技</h5>
                    <div class="aside_links">
                        <ul>
                            <li><a href="">科普</a></li>
                            <li><a href="">编程</a></li>
                            <li><a href="">算法</a></li>
                            <li><a href="">通信</a></li>
                            <li><a href="">更多</a></li>
                        </ul>
                    </div>
                </div>


                <div class="aside_label">
                    <h5>科技</h5>
                    <div class="aside_links">
                        <ul>
                            <li><a href="">科普</a></li>
                            <li><a href="">编程</a></li>
                            <li><a href="">算法</a></li>
                            <li><a href="">通信</a></li>
                            <li><a href="">智能</a></li>
                            <li><a href="">数据</a></li>
                            <li><a href="">更多</a></li>
                        </ul>
                    </div>
                </div>

            </div>

        </div>

    </div>


















    <div class="insert_content">
        <h3>读书活动</h3>
        <ul>
            <li><a href="">全部</a></li>
            <li><a href="">读书专题</a></li>
            <li><a href="">直播活动</a></li>
            <li><a href="">名家问答</a></li>
            <li><a href="">共读交流</a></li>
            <li><a href="">鉴书团</a></li>
        </ul>
    </div>
    <div class="content_container">
        <div class="middle_container">
            <div class="down_container">
                <img src="./img/部分下.png">
            </div>

            <div class="down_container_1">
                <img src="./img/下部分.png">
            </div>


        </div>



        <div class="aside_content">
            <h4>畅销图书馆</h4>
            <br>
            <hr>
            <div class="aside_label">
                <h5>1.敖丙传.壹</h5>
                <h6>二斯特洛夫斯基 绘/古吉 绘/李子兰 编</h6>
            </div>

            <div class="aside_label">
                <h5>2.少年游学 游遍中国研学旅行 青少年历史地理文学科普套装共5册</h5>
                <h6>背景日知图书</h6>
            </div>

            <div class="aside_label">
                <h5>3.漫画讲透黄帝内经</h5>
                <h6>张嘉铭/ 王婧编 著</h6>
            </div>


            <div class="aside_label">
                <h5>4.克林索尔的最后夏天</h5>
                <h6>[德] 赫尔曼·黑塞</h6>
            </div>


            <div class="aside_label">
                <h5>5.天堂旅行团</h5>
                <h6>张嘉佳</h6>
            </div>


            <div class="aside_label">
                <h5>6.无病到天年2:大病预防先除湿</h5>
                <h6>路志正</h6>
            </div>


            <div class="aside_label">
                <h5>7.悉达多</h5>
                <h6>[德] 赫尔曼·黑塞</h6>
            </div>


            <div class="aside_label">
                <h5>8.我与地坛</h5>
                <h6>史铁生</h6>
            </div>


            <div class="aside_label">
                <h5>9.窄门</h5>
                <h6>[法] 安德烈·纪德</h6>
            </div>

            <div class="aside_label">
                <h5>10.不被大风吹倒</h5>
                <h6>莫言</h6>
            </div>






        </div>






</body>

</html>